<script setup>
import StringOrNumber from '../../../StringOrNumber.vue';
import {deleteTableRow} from '../../../../../utils/utils.js'
import { onMounted, reactive, ref } from 'vue';
const props = defineProps({
    probeConfig: {
        type: Object
    },
    containerIndex: {
        type: Number,
    },
    probeType: {
        type: String
    },
    containerType: {
        type: String
    }
})
const rules = reactive({
    port: [
        {required: true, message: '请输入需要探测的端口号', trigger: 'blur'}
    ]
})
// onMounted(()=>{
//   console.log("接收的数据:", props.probeConfig)
// })
const editHttpHeaders = ref(false)
const addHeader = () => {
  const header = {
    name: "",
    value: ""
  }
  if(props.probeConfig.httpGet.httpHeaders==null || props.probeConfig.httpGet.httpHeaders == undefined){
    props.probeConfig.httpGet.httpHeaders = []
  }
  props.probeConfig.httpGet.httpHeaders.unshift(header)
}
</script>

<template>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="请求端口" :rules="rules.port" :prop="('spec.template.spec.containers.'+props.containerIndex+'.'+props.probeType+'.httpGet.port')" required>
          <StringOrNumber input-width="150px" v-model:data="props.probeConfig.httpGet.port" placeholder="请输入请求的端口"></StringOrNumber>
      </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="请求主机"  prop="">
          <el-input style="width: 240px;" v-model="props.probeConfig.httpGet.host" placeholder="可选, 请输入请求的主机"></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="请求接口"  prop="">
          <el-input style="width: 240px;" v-model="props.probeConfig.httpGet.path" placeholder="可选, 请输入请求的接口"></el-input>
      </el-form-item>
      </el-col>
      
    </el-row>
    <el-row >
      <!-- <el-col :span="8">
        <el-form-item label="自定义请求头"  prop="">
          <el-switch v-model="editHttpHeaders"></el-switch>        
        </el-form-item>
      </el-col> -->
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="请求协议"  prop="">
          <el-select v-model="props.probeConfig.httpGet.scheme">
            <el-option
            v-for="s in ['HTTP','HTTPS']"
            :key="s"
            :label="s"
            :value="s"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item label="自定义请求头">
          <el-table
          border
          height="140px"
          :data="props.probeConfig.httpGet.httpHeaders"
          >
            <el-table-column align="center" prop="name" label="请求头名称">
              <template #default="scope">
                <el-input v-model.trim="scope.row.name" placeholder="请求头名称"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="value" label="请求头的值">
              <template #default="scope">
                <el-input v-model.trim="scope.row.value" placeholder="请求头的值"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template #header>
                <el-button link type="primary" @click="addHeader()">添加</el-button>
              </template>
              <template #default="scope">
                <el-button link type="warning" @click="deleteTableRow(props.probeConfig.httpGet.httpHeaders, scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        
      </el-col>
    </el-row>
</template>

<style scoped>

</style>
